<template>
	<view class="content">
		<view class="musicview">
			<image :src="musicimg" mode="aspectFit" style="height: 150upx;width: 150upx;"></image>
			<view class="musicmid">
				<view class="musictext">
					{{musicname}}
				</view>
				<progress :percent='musicprogress' style="width: 90%;" activeColor="#1ba194"
					backgroundColor="#C0C0C0" />
				<view class="musictext">
					歌手:{{musicsinger}}
				</view>
				<view class="musictext">
					专辑:{{musiczj}}
				</view>
			</view>
			<uni-icons custom-prefix="iconfont" :type="musicicon" size="150upx" @click="playBtnClick()"></uni-icons>
		</view>
		<view style="width: 100%;background-color: whitesmoke;text-align: center;">{{playMode}}</view>
		<view class="buttonview" v-if="isShowMusic">
			<button style="width: 50%;" @click="changeMode()">切换播放模式</button>
			<button style="width: 50%;" @click="getMusicGroup()">选择歌单</button>
		</view>
		<view style="width: 100%;background-color: whitesmoke;text-align: center;">一起听歌选项</view>
		<view class="buttonview" v-if="isShowMusic">
			<button style="width: 33%;" @click="linkServer()">同步</button>
			<button style="width: 33%;" @click="openFindMusic()">点歌</button>
			<button style="width: 33%;" @click="clickNextMusic()">切歌</button>
		</view>
		<view v-if="isShowMusic">
			<uni-list>
				<uni-list :border="true" v-for="(item,index) in showMusicList">
					<uni-list-chat clickable :title="item.name" :avatar="HttpTool.getUrl()+item.img"
						:note="item.arname+'  '+item.alname" @click="clickMyMusic(index)">
					</uni-list-chat>
				</uni-list>
			</uni-list>
		</view>
		<view v-if="isShowGd">
			<!-- <uni-easyinput
				v-model="findName" 
				placeholder="输入名字" 
				@blur="NeteaseCloudMusicApiset()"
			></uni-easyinput> -->
			<view class="buttonview">
				<button style="width: 100%;" @click="goreturn()">取消</button>
				<!-- <button style="width: 50%;" @click="">搜索</button> -->
			</view>
			<view style="text-align: center;">点击选择歌单</view>
			<uni-list>
				<uni-list :border="true" v-for="(item,index) in musicGroup">
					<uni-list-chat clickable :title="item.name" :avatar="item.img" :note="item.about"
						@click="selectMusicGroup(item)">
					</uni-list-chat>
				</uni-list>
			</uni-list>
		</view>
		<view v-if="isShowGq">
			<uni-easyinput v-model="findName" placeholder="输入名字" @blur="NeteaseCloudMusicApiset()"></uni-easyinput>
			<view class="buttonview">
				<button style="width: 50%;" @click="goreturn()">取消</button>
				<button style="width: 50%;" @click="findMusic()">搜索</button>
			</view>
			<view style="text-align: center;">点击选择歌曲</view>
			<uni-list>
				<uni-list :border="true" v-for="(item,index) in findMusicList">
					<uni-list-chat clickable :title="item.name" :avatar="HttpTool.getUrl()+item.img"
						:note="item.arname+'  '+item.alname" @click="clickServerMusic(item)">
					</uni-list-chat>
				</uni-list>
			</uni-list>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				musicicon: 'icon-bofang',
				musicprogress: 50,
				musicname: '未知歌名',
				musicsinger: '未知歌手',
				musiczj: '未知专辑',
				musicimg: '../../static/logo.png',
				playMode: '列表顺序',
				isShowGd: false,
				isShowGq: false,
				isShowMusic: true,
				musicGroup: [],
				findMusicList: [],
				showMusicList: [],
				player: {},
				isPhome: false,
				playMusicNo: -1,
				findName: '',
				startTime: 0
			}
		},
		onLoad() {
			this.WebSocketTool.musicUpdate = this.getServerMusicList
			// this.WebSocketTool.connectSocket(this)
			let platform = uni.getSystemInfoSync().platform
			console.log(platform);
			if (platform === 'ios' || platform === 'android') {
				try {
					this.player = uni.getBackgroundAudioManager()
					this.player.onNext(() => {
						this.player.stop()
						if (this.MusicMode === 2) {
							this.HttpTool.NextMusic(this)
						} else {
							this.playmusic()
						}
					})
				} catch (e) {
					this.player = uni.createInnerAudioContext()
				}
			} else {
				this.player = uni.createInnerAudioContext()
			}
			this.player.onTimeUpdate(() => {
				this.musicprogress = (this.player.currentTime / this.player.duration) * 100
			});
			this.player.onStop((res) => {
				this.musicicon = 'icon-bofang'
			});
			this.player.onPlay(() => {
				this.musicicon = 'icon-zanting'
			});
			this.player.onPause((res) => {
				this.musicicon = 'icon-bofang'
			});
			this.player.onEnded(() => {
				this.player.stop()
				if (this.MusicMode === 2) {
					this.HttpTool.NextMusic(this)
				} else {
					this.playmusic()
				}
			});
			this.player.onCanplay(() => {
				if (this.startTime !== undefined && this.startTime !== null && this.startTime > 0) {
					let timestamp = new Date().getTime()
					let startTime = parseInt((timestamp - this.startTime) / 1000)
					console.log(startTime);
					if (startTime > this.player.duration && this.MusicMode === 1) {
						this.HttpTool.NextMusic(this)
						return
					}
					if (startTime > 0) {
						this.player.seek(startTime)
					}
				}
			});
			this.getLocMusicGroup()
		},
		methods: {
			clickNextMusic() {
				if (this.MusicMode !== 2) {
					this.playmusic()
					return
				}
				this.HttpTool.NextMusic(this)
			},
			async clickServerMusic(music) {
				uni.showLoading({
					title: '点歌',
					mask: true
				})
				let res = await this.HttpTool.SetMusic(this, music)
				uni.hideLoading()
				if (res.code === 200) {
					this.goreturn()
					uni.showToast({
						title: '成功',
						duration: 2000,
					});
				} else {
					uni.showToast({
						title: '失败',
						duration: 2000,
					});
				}
			},
			getLocMusicGroup() {
				try {
					const value = uni.getStorageSync('MusicList')
					if (value) {
						this.showMusicList = value
						this.MusicList = value
					}
				} catch (e) {
					uni.showToast({
						title: e.message,
						duration: 2000,
						icon: "error"
					})
				}
			},
			async getMusicGroup() {
				if (this.MusicMode === 2) {
					uni.showToast({
						title: '请先返回列表模式',
						duration: 2000,
						icon: 'error'
					})
					return
				}
				uni.showLoading({
					title: '获取歌单列表',
					mask: true
				})
				let res = await this.HttpTool.GetMusicGroupList(this)
				uni.hideLoading()
				if (res.code === 200) {
					this.isShowMusic = false
					this.isShowGd = true
					this.musicGroup = res.data
				} else {
					uni.showToast({
						title: res.message,
						duration: 2000,
						icon: 'error'
					});
				}
			},
			goreturn() {
				this.isShowMusic = true
				this.isShowGd = false
				this.isShowGq = false
				this.findName = ''
			},
			async selectMusicGroup(item) {
				uni.showLoading({
					title: '获取歌单列表',
					mask: true
				})
				let res = await this.HttpTool.GetMusicGroup(this, item)
				uni.hideLoading()
				if (res.code === 200) {
					this.showMusicList = res.data.musicList
					this.MusicList = res.data.musicList
					this.playMusicNo = -1
					uni.setStorageSync('MusicList', res.data.musicList)
				}
				this.goreturn()
			},
			changeMode() {
				if (this.MusicMode !== 0 && this.MusicMode !== 1) {
					this.getLocMusicGroup()
				}
				if (this.MusicMode === 0) {
					this.MusicMode = 1
					this.playMode = "列表随机"
					this.playmusic()
				} else {
					this.MusicMode = 0
					this.playMode = "列表顺序"
					this.playmusic()
				}
			},
			playBtnClick() {
				if (this.player.paused === false && this.player.currentTime !== 0) {
					this.player.pause()
				} else {
					if (this.player.currentTime === 0) {
						this.playmusic()
					} else {
						this.player.play()
					}
				}
			},
			playmusic() {
				switch (this.MusicMode) {
					case 0:
						console.log("MusicMode:" + this.MusicMode)
						if (this.MusicList.length > 0) {
							if (this.playMusicNo === -1 || this.playMusicNo >= (this.MusicList.length - 1)) {
								this.musicPlay(this.MusicList[0])
								this.playMusicNo = 0
							} else {
								this.playMusicNo += 1
								this.musicPlay(this.MusicList[this.playMusicNo])
							}
						}
						break;
					case 1:
						console.log(this.MusicMode)
						if (this.MusicList.length > 0) {
							this.playMusicNo = Math.floor(Math.random() * this.MusicList.length)
							this.musicPlay(this.MusicList[this.playMusicNo])
						}
						break;
					case 2:
						console.log(this.MusicMode)
						if (this.MusicList.length > 0) {
							this.playMusicNo = Math.floor(Math.random() * this.MusicList.length)
							this.musicPlay(this.MusicList[this.playMusicNo])
						}
						break;
					default:
						break;
				}
			},
			clickMyMusic(index) {
				if (this.MusicMode === 0 || this.MusicMode === 1) {
					this.musicPlay(this.MusicList[index])
					this.playMusicNo = index
				}
			},
			linkServer() {
				this.playMode = "服务器同步"
				this.MusicMode = 2
				this.getServerMusicList()
			},
			async getServerMusicList() {
				if (this.MusicMode !== 2) {
					return
				}
				let res = await this.HttpTool.GetMusicList(this)
				if (res.code !== 200) {
					return
				}
				let mlist = res.data
				if (mlist === undefined || mlist === null) {
					return
				}
				if (mlist.length !== 0 && (this.MusicList.length === 0 || mlist[0].id !== this.MusicList[0].id)) {
					this.musicPlay(mlist[0])
				}
				this.showMusicList = mlist
				this.MusicList = mlist
			},
			async findMusic() {
				uni.showLoading({
					title: '搜索中',
					mask: true
				})
				let res = await this.HttpTool.SelectMusic(this, {
					"name": this.findName
				})
				uni.hideLoading()
				if (res.code !== 200) {
					return
				}
				this.findMusicList = res.data
			},
			openFindMusic() {
				if (this.MusicMode !== 2) {
					uni.showToast({
						title: '请先切换同步模式',
						duration: 2000,
						icon: 'error'
					})
					return
				}
				this.isShowMusic = false
				this.isShowGq = true
			},
			musicPlay(music) {
				this.player.title = music.name
				this.player.singer = music.arname
				this.player.coverImgUrl = this.HttpTool.getUrl() + music.img
				this.player.src = this.HttpTool.getUrl() + music.file
				this.musicname = music.name
				this.musicsinger = music.arname
				this.musiczj = music.alname
				this.musicimg = this.HttpTool.getUrl() + music.img
				this.player.play()
				this.startTime = music.starttime
			}
		},
	}
</script>

<style>
	.musicview {
		/* background-color: gainsboro; */
		width: 100%;
		height: 150upx;
		display: flex;
		flex-direction: row;
		background-color: whitesmoke;
	}

	.musicmid {
		width: 450upx;
		height: 150upx;
		background-color: whitesmoke;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: auto;
		margin-right: auto;
	}

	.musictext {
		white-space: nowrap;
		overflow: hidden;
		max-width: 450upx;
		font-size: small;
	}

	.buttonview {
		display: flex;
		flex-direction: row;
	}
</style>
